<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>孪生管理 - 客户端</title>
    <link rel="icon" th:href="@{/static/favicon.ico}">
    <link rel="stylesheet" th:href="@{/static/css/main.css}">
</head>
<body>
<div id="info"></div>
<div id="controller">
    <ul class="spoiler closed">
        <li class="title">复位选项</li>
        <li class="sp-li sub-title"><button id="reset">复位电机</button></li>
    </ul>
    <ul class="spoiler">
        <li class="title">推杆选项</li>
        <li class="sp-li sub-title">停留时长</li>
        <li class="sp-li"><input id="hold-range" type="range" step="0.1" min="0" max="10" value="0" /><label for="hold-range">0</label><span>s</span></li>
        <li class="sp-li sub-title">推动推杆</li>
        <li class="sp-li"><button class="push" data-id="1">一号</button><button class="push" data-id="2">二号</button><button class="push" data-id="3">三号</button></li>
        <li class="sp-li"><button class="push" data-id="4">四号</button><button class="push" data-id="5">五号</button><button class="push" data-id="6">六号</button></li>
    </ul>
    <ul class="spoiler">
        <li class="title">传送带选项</li>
        <li class="sp-li sub-title">上货端传送带(2m)</li>
        <li class="sp-li"><button id="belt-s" data-roll="false">启动</button><input id="belt-s-range" type="range" min="1" max="36" value="10"><label for="belt-s-range">10</label><span>m/min</span></li>
        <li class="sp-li sub-title">分拣端传送带(3m)</li>
        <li class="sp-li"><button id="belt-l" data-roll="false">启动</button><input id="belt-l-range" type="range" min="1" max="36" value="10"><label for="belt-l-range">10</label><span>m/min</span></li>
    </ul>
</div>
    <script type="module" th:src="@{/static/js/init.js}"></script>
</body>
</html>